<div class="layui-fluid" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <div class="layui-row">
        <div class="layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    注册用户信息列表
                </div>
                <div class="layui-card-body usersList">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in dataSource">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.password}}</td>
                            <td>
                                <button class="layui-btn layui-bg-red" v-on:click="removeDate" data-id="{{item.id}}">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <!--翻页-->
                    <div id="laypageDemo"></div>
                </div>
            </div>

        </div>
    </div>

</div>
<script type="text/javascript">
    var $ = layui.jQuery;
    var vm = new Vue({
        // 生效范围
        el: '.usersList',
        // 双向绑定的内容
        data: {
            dataSource: []
        },
        methods: {
            // 查询所有用户
            loadDate: function (page, rows) {
                page = page ? page : 1;
                rows = rows ? rows : 5;
                this.$http({
                    url: 'users/list.do',
                    data: {
                        page: page,
                        rows: rows,
                    }
                }).then(function (res) {
                    var data = res.data;
                    vm.dataSource = data.rows;
                    layui.use('laypage',function () {
                        var laypage = layui.laypage;
                        laypage.render({
                            elem:'laypageDemo',
                            count:data.total,
                            limit:rows,
                            curr:page,
                            jump:function (obj,first) {
                                // 如果是首页（首次不执行）
                                if (!first){
                                    vm.loadDate(obj.curr,obj.limit)
                                }

                            }
                        })
                    })
                })

            },
            //删除一个电影信息
            removeDate:function (e) {
                if (!confirm("你确认要删除该用户吗？")){
                    return;
                }
                this.$http({
                    url:'users/delete.do?id=' + e.target.dataset.id,
                    data:{}
                }).then(function (res) {
                    var data = res.data;
                    if (data.code != 0){
                        alert(data.errMsg);
                        return;
                    }
                    alert("删除成功");
                    vm.loadDate()
                })

            }
        }

    });
    // 初始化数据
    vm.loadDate()
</script>